<script setup lang='ts'>
  import { getAssetsFile } from '@/utils/public'
  import xmdialog from '@/components/xmdialog.vue';
  import { showWinner, GameResult } from '@/pinia/getter';
  import { controlStore } from '@/pinia/modules/controller';
  const useControlStore = controlStore()
  // const GameResult = {
  //   winner:1,
  //   rewardPrice:9999,
  //   gameResult:2
  // }
  // const showWinner = true
</script>

<template>
  <xmdialog class="newDialogBack" :close-show="2" v-model:dialogshow="showWinner">
    <template v-slot:titleImg>
      <img :src="getAssetsFile(GameResult.gameResult!=2?'titleimg6.png':'titleimg7.png')">
    </template>
    <div :class="['borderColor',GameResult.gameResult == 2?'lightBack':'']">
      <div class="cont">
        <div class="tipsFont">
          {{ ['本局未参与～','很遗憾，套马失败～','套马成功～'][GameResult.gameResult] }}
        </div>
        <div class="cattleIcon">
          <img v-if="GameResult.winner" :src="getAssetsFile(`cattleIcon${GameResult.winner}.png`)">
        </div>
        <div @click="useControlStore.showWinner = false" class="butBack flex-align-center">
          <img v-show="GameResult.gameResult != 2" :src="getAssetsFile('textImg3.png')" class="textImg">
          <template v-if="GameResult.gameResult == 2">
            <img :src="getAssetsFile('icon3.png')" class="iconImg">
            <div class="num">{{ GameResult.rewardPrice }}</div>
          </template>
        </div>
      </div>
    </div>
  </xmdialog>
</template>

<style lang='scss' scoped>
  :deep(.Functionality) {
    padding: 0 11px;
    animation:turnOver .5s linear 1;
    .iconImg {
      right: -11px !important;
    }
    @keyframes turnOver{
      0% {
        transform: scale(0) ;
      }
      100% {
        transform: scale(1) ;
      }
    }
  }
  .newDialogBack {
    
    .borderColor {
      width: 218px;
      height: 208px;
      .cont {
        width: 100%;
        height: 100%;
      }
      .tipsFont {
        color: #fff;
        font-size: 12px;
        font-weight: 500;
        line-height: 18px;
        text-align: center;
      }
      .cattleIcon {
        width: 108px;
        height: 108px;
        margin: 0 auto;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .butBack {
        width: 130px;
        height: 42px;
        margin: 10px auto;
        background: linear-gradient(180deg, #FFE21F 0%, #FFC00E 100%);
        box-shadow: inset 0px 2px 0px 0px rgba(255,255,255,0.7), inset 0px -2px 0px 0px rgba(157,0,0,0.5);
        border-radius: 21px;
        .textImg {
          width: 48px;
          height: 16px;
        }
        .iconImg {
          width: 22px;
          height: 22px;
          margin-right: 2px;
        }
        .num {
          font-size: 20px;
          font-weight: 600;
          color: #000;
          line-height: 20px;
        }
      }
    }
    .lightBack {
      overflow: hidden;
      position: relative;
      background: #DE5108;
      border: 4px solid #FFF28D;
      .cont {
        z-index: 2;
        position: absolute;
        left: 0;
        top: 0;
        padding: 11px;
        box-sizing: border-box;
      }
    }
    .lightBack::after {
      z-index: 1;
      position: absolute;
      top: 50%;
      left: 50%;
      display: block;
      content: '';
      width: 115%;
      height: 115%;
      background:url($href+'light.png') left top / 100% 100% no-repeat;
      animation:move 3s linear infinite;
    }
    @keyframes move{
      0% {
        transform: translate(-50%,-50%) rotate(0);
      }
      100% {
        transform: translate(-50%,-50%) rotate(360deg);
      }
    }
  }

</style> 